画面全体でウィジェットをアニメーション化する

コンテンツ

ユーザーが画面から移動するときにアプリ内をガイドすると役立つことがよくありますスクリーンへ。ユーザーをアプリ内に誘導する一般的な手法は、アニメーション化することです。ウィジェットをある画面から次の画面に移動します。これにより、接続する視覚的なアンカーが作成されます。 2つの画面。

使用Heroウィジェットウィジェットをある画面から次の画面にアニメーション化します。このレシピでは次の手順を使用します。

同じ画像を表示する 2 つの画面を作成します。
追加Heroウィジェットを最初の画面に移動します。
追加Heroウィジェットを 2 番目の画面に移動します。

1. 同じ画像を表示する 2 つの画面を作成する

この例では、両方の画面に同じ画像を表示します。最初の画面から 2 番目の画面まで画像をアニメーション化するユーザーが画像をタップします。ここでは、視覚的な構造を作成します。次のステップでアニメーションを処理します。

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const DetailScreen();
          }));
        },
        child: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

2. を追加します。`Hero`最初の画面へのウィジェット

2 つの画面をアニメーションで接続するには、ラップします。のImage両方の画面のウィジェットHeroウィジェット。のHeroウィジェットには 2 つの引数が必要です。

`タグ`: 「ヒーロー」を識別するオブジェクト。両方の画面で同じである必要があります。
「子供」: 画面全体でアニメーション化するウィジェット。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

3. を追加します。`Hero`ウィジェットを 2 番目の画面に移動

最初の画面で接続を完了するには、包むImage2番目の画面でHero同じものを持つウィジェットtagとしてHero最初の画面で。

適用後、Heroウィジェットを 2 番目の画面に移動し、画面間のアニメーションは正常に動作します。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://picsum.photos/250?image=9',
  ),
)

インタラクティブな例

import 'package:flutter/material.dart';

void main() => runApp(const HeroApp());

class HeroApp extends StatelessWidget {
  const HeroApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) {
            return const DetailScreen();
          }));
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
      ),
    );
  }
}